body {
  width: 100vw;
  height: 100vw;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.upper-card {
  display: flex;
  flex-direction: row;
  .date-container {
    width: 200px;
  }
}

.vertical-line,
.vertical-line-start,
.vertical-line-end,
.time-line {
  position: relative;
  top: 0px;
  left: 0px;
  height: 200px;
  width: 1px;
  background-color: red;
  float: left;
  z-index: 999;
  pointer-events: none; // 不影响被遮盖元素的鼠标事件
}

.vertical-line-start,
.vertical-line-end {
  display: none;
}

.tag-line {
  background-color: greenyellow;
  width: 100vw;
  height: 100px;
  position: relative;

  .tag-line-element {
    display: inline-block;
    // position: relative;
    position: absolute;
    top: 0px;
    height: 100px;
  }
  .tag-line-element:hover {
    filter: brightness(0.66);
  }
}

.program-line {
  background-color: grey;
  width: 100vw;
  height: 100px;
  position: relative; // 子绝父相

  .program-line-element {
    display: inline-block;
    // position: relative;
    position: absolute;
    top: 0px;
    height: 100px;
  }
  .program-line-element:hover {
    filter: brightness(0.66);
  }
}

.time-axis {
  height: 20px;
  background-color: grey;
  position: relative;

  .time-block {
    position: absolute;
    // left: 20px;
    transform: translateX(0px);
    width: 20px;
    height: 20px;
    background-color: #bfa;
  }
}

.bottom {
  display: flex;
  flex-direction: row;
  overflow-y: hidden;

  .table-container {
    height: 400px;
    width: 400px;
    overflow: auto;
    flex-grow: 2;

    #table {
      // display: flex;
      // flex-direction: row;
      min-width: 300px;
    }

    .mat-column-id {
      max-width: 50px;
    }
    .mat-column-program_name {
      max-width: 100px;
    }
    .mat-column-title {
      max-width: 500px;
    }
    .mat-column-begin_time,
    .mat-column-end_time {
      max-width: 100px;
    }
  }

  .capture-card {
    height: 400px;
    width: 400px;
    flex-grow: 3;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    #capture {
      // width: 500px;
      width: 95%;
      height: 95%;
      display: inline-block;
      // height: 50px;
    }
  }
}
